<template>
	<view class="content">
		<view class="flex-justify-center menu-box ">
			<view class="menu-content flex-align-center">
				<view @click="onChangeType(1)"
					:class="['title-item',data.type==1?'title-item-active':'','flex-center-r']">
					<text>个人</text>
					<view :class="['bottom-line',data.type==1?'bottom-line-active':'']"></view>
				</view>
				<view @click="onChangeType(2)"
					:class="['title-item',data.type==2?'title-item-active':'','flex-center-r']">
					<text>团队</text>
					<view :class="['bottom-line',data.type==2?'bottom-line-active':'']"></view>
				</view>

			</view>
		</view>

		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in data.list" :key="index" @click="selectItem(item)">
				<img v-show="item.selectd" src="../../../static/img/img/xuanz-icon.png" class="xuanz-icon" alt="">
				<view class="flex-justify-s ">
					<view class="">
						<view class="name">{{item.name || item.teamName}}</view>
						<view class="sfz">{{item.licenseNum}}</view>
					</view>
					<text class="bj" @click.stop="edit(item)">编辑资料</text>
				</view>

			</view>
		</view>

		<!-- 按钮 -->
		<view class="addCSZ" @click="add">+添加参赛者</view>
		<view class="btn-b ">
			<view class="blue-btn" @click="save">保存</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
	} from "vue";
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		entryList,
		teamList,
		applicationSelfTeamBySourceId
	} from '../../../../requestApi/api.js';

	const data = ref({
		type: 1, //1个人  2团队
		id: '',
		list: [],
		ids:[],
		sourceId:''
	});
	onLoad((e) => {
		data.value.id = e.id;
		data.value.type = e.type;

	})
	onShow(() => {
		getList();
	});
	//保存
	const save=()=>{
		applicationSelfTeamBySourceId({
			gameId:data.value.id,
			sourceId:data.value.sourceId,
			type:data.value.type
		}).then(res=>{
			uni.navigateBack(1)
		})
	};
	//编辑
	const edit=(item)=>{
		let info=JSON.stringify(item)
		if(data.value.type==1){
			uni.navigateTo({
				url:`/pages/subpackagesSon/competition/addContestant/addContestant?id=${data.value.id}&info=${info}`
			})
		}else{
			uni.navigateTo({
				url:`/pages/subpackagesSon/competition/addTeam/addTeam?id=${data.value.id}&info=${info}`
			})
		}
		
	};
	//选择成员
	const selectItem = (item) => {
		// console.log(555)
		data.value.list.map((value) => {
			if (value.id == item.id && !item.selectd) {
				value.selectd = true;
				data.value.sourceId=item.id;
			}else{
				value.selectd=false;
			}
			
			return value;
		})
		
		// let findIndex = data.value.ids.findIndex(value => value == item.id);
		// if (findIndex > -1) {
		// 	//存在
		// 	data.value.ids.splice(findIndex, 1);
		// } else {
		// 	//没有选择
		// 	data.value.ids.push(item.id)
		// }
		// console.log(data.value.ids)
	};
	//添加参赛者
	const add = () => {
		if (data.value.type == 1) {
			//个人
			uni.navigateTo({
				url: `/pages/subpackagesSon/competition/addContestant/addContestant?id=${data.value.id}`
			})
		} else {
			//团队
			uni.navigateTo({
				url: `/pages/subpackagesSon/competition/addTeam/addTeam?id=${data.value.id}`
			})

		}

	};
	//获取参赛个人/团队
	const getList = () => {
		if (data.value.type == 1) {
			getPerson();
		} else {
			getTeam();
		}
	};
	//获取个人
	const getPerson = () => {
		entryList({
			id: data.value.id
		}).then(res => {
			res.data.map(item => item.selected = false)
			data.value.list = res.data
			// console.log(data.value.list)
		})
	};
	//获取团队
	const getTeam = () => {
		teamList({
			id: data.value.id
		}).then(res => {
			res.data.map(item => item.selected = false)
			data.value.list = res.data;


		})
	};

	//切换类型
	function onChangeType(type) {
		data.value.type = type;
		getList();
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 200rpx;
	}

	.menu-box {
		height: 108rpx;
		padding-right: 76rpx;
		flex-direction: column;
		padding-top: 10rpx;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;

		.menu-content {
			padding: 0 40rpx;
			margin-bottom: 10rpx;

			.title-item {
				font-size: 30rpx;
				color: #2C2C2C;
				margin-right: 40rpx;

				.bottom-line {
					width: 30rpx;
					height: 8rpx;
					background-color: #FFFFFF;
					border-radius: 16rpx;
					margin-top: 4rpx;
				}

				.bottom-line-active {
					background-color: #5E77F8;
				}

			}

			.title-item-active {
				font-size: 30rpx;
				color: #2C2C2C;
				font-weight: bold;
			}
		}

	}

	.list {
		padding: 0 20rpx;

		.item {
			height: 148rpx;
			border: 2rpx solid #F2F2F2;
			margin-bottom: 20rpx;
			position: relative;
			padding: 26rpx 30rpx;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				line-height: 42rpx;
				color: #333333;
				margin-bottom: 12rpx;
			}

			.sfz {
				font-size: 20rpx;
				color: #9A9A9A;
				line-height: 28rpx;
			}

			.bj {
				font-size: 24rpx;
				line-height: 30rpx;
				color: #3E67F5;
			}

			.xuanz-icon {
				width: 52rpx;
				height: 40rpx;
				position: absolute;
				top: 0;
				right: 0;
			}


		}
	}

	.addCSZ {
		margin: 38rpx auto;
		width: 228rpx;
		height: 66rpx;
		background: rgba(61, 195, 156, 1);
		border-radius: 16rpx;
		font-size: 28rpx;
		line-height: 66rpx;
		color: #FFFFFF;
		text-align: center;
	}
</style>